<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<c:set var="path" value="${pageContext.request.contextPath }" />
<%@ taglib tagdir="/WEB-INF/tags" prefix="matrix"%>
<%@ taglib uri="http://matrixcsm.zkingsoft.com" prefix="cms"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="renderer" content="webkit">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<meta http-equiv="Cache-Control" content="no-siteapp">
<c:set var="companyId" value="17" ></c:set>
<cms:setting companyId="${companyId }" var="title" code="title"></cms:setting>
<title data-index="0" id="selextTitle">${title.paramValue }</title>
<cms:setting companyId="${companyId }" var="keyword" code="keyword"></cms:setting>
<meta name="keywords" content="${keyword.paramValue }">
<cms:setting companyId="${companyId }" var="description" code="description"></cms:setting>
<meta name="description" content="${description.paramValue }" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
    <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <script src="http://apps.bdimg.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
<link
	href="${path }/resource/plugin/bootstrap-3.3.5/css/bootstrap.min.css"
	rel="stylesheet" type="text/css">
<link
	href="${path }/resource/plugin/font-awesome/css/font-awesome.min.css"
	rel="stylesheet" type="text/css">
<link href="${path }/resource/css/styleOne/animate.min.css"
	rel="stylesheet" type="text/css" />
<link href="${path }/resource/css/visitor/base.css" rel="stylesheet"
	type="text/css">
<link rel="shortcut icon" href="${浏览器logo }">
<style>

        .advantage{padding-top: 80px;padding-bottom: 80px;}
        .advantage ul{margin-top: 50px;overflow: hidden}
        .advantage ul li{float: left;width: 14%;margin: 0 11px;text-align: center}
        .advantage .advantage-icon{
            margin: 0px auto;
            padding: 0;
            display: block;
            width: 148px;
            height: 138px;
        }
        .advantage .advantage-icon1{
            background: url(images/sj.png) no-repeat;
            background-size: 100%;
        }
        .advantage .advantage-icon1:hover{
            background: url(images/a_sj.png) no-repeat;
                background-size: 100%;
        }
        .advantage .advantage-icon2{
            background: url(images/cl.png) no-repeat;
                background-size: 100%;
        }
        .advantage .advantage-icon2:hover{
            background: url(images/a_cl.png) no-repeat;
                background-size: 100%;
        }
        .advantage .advantage-icon3{
            background: url(images/sg.png) no-repeat;
                background-size: 100%;
        }
        .advantage .advantage-icon3:hover{
            background: url(images/a_sg.png) no-repeat;
                background-size: 100%;
        }
        .advantage .advantage-icon4{
            background: url(images/fw.png) no-repeat;
                background-size: 100%;
        }
        .advantage .advantage-icon4:hover{
            background: url(images/a_fw.png) no-repeat;
                background-size: 100%;
        }
        .advantage .advantage-icon5{
            background: url(images/gc.png) no-repeat;
                background-size: 100%;
        }
        .advantage .advantage-icon5:hover{
            background: url(images/a_gc.png) no-repeat;
                background-size: 100%;
        }
        .advantage .advantage-icon6{
            background: url(images/xt.png) no-repeat;
                background-size: 100%;
        }
        .advantage .advantage-icon6:hover{
            background: url(images/a_xt.png) no-repeat;
                background-size: 100%;
        }
        .advantage .txt h3{
            line-height: 24px;
            margin-top: 20px;
            color: #555;
            font-size: 16px;
            font-weight: bold;
        }
        .advantage .txt span{
            font-family: Arial;
            color: #555;
            font-size: 10px;
        }
        .advantage .txt p{
            color: #555;
            font-size: 13px;
        }

        .news{padding-bottom: 60px;}
        .news .en-tit{margin-left: -28px;}
        .news .line2{left: 65px;}
        .university .en-tit{margin-left: -45px;}
        .university .line2{left: 100px;}
        .university{
          overflow: hidden;
          padding-bottom: 80px;
          position: relative;
          left:0;
          top:0;
          zoom:1;
          white-space: nowrap;
          width: 100%;
        }
        .university ul{
          margin-top: 50px;
          position: relative;
          left:0;
          top:0;
        }
        .university ul li{
            position: relative;
            width: 275px;
            border: 1px solid #dddddd;
            display: inline-block;
            padding: 0;
            border-radius: 0;
            margin-right: 10px;
          }
          .university  li img{
            width: 100%;
            height: 208px;
          }
          .university  li span{
            display: block;
            height: 60px;
            line-height: 60px;
            text-align: center;
            color: #333;
            background: #ffffff;
            font-size: 18px;
          }
          .product{padding-bottom: 80px;}
          .case{padding-bottom: 80px;}
          .case .en-tit{margin-left: -34px;}
          .case .line2{left: 60px; }
          .product .en-tit{margin-left: -49px;}
          .product .line2{left: 96px; }
        .university .prev,.university  .next{
          display: inline-block;
          height: 60px;
          line-height: 60px;
          width: 42px;
          background: rgba(0,0,0,0.6);
          position: absolute;
          top:50%;
          margin-top: -30px;
          z-index: 100;
          cursor: pointer;
          color: rgba(255,255,255,0.8);
          text-align: center;
          font-size: 20px;
          display: none;
        }
        .university .prev{left: 0;} 
        .university .next{right: 0;}
        .company-info{margin-top: 50px;padding-bottom: 80px;overflow: hidden}
        .company-info .left{float: left;width: 580px;margin-right: 20px;}
        .company-info h3{font-weight: bold;font-size: 20px;letter-spacing: 3px;}
        .company-info h4{color:#39325e;font-size: 16px;margin-top: 12px;font-weight: bold; letter-spacing: 3px;}
        .company-info .right{float: right;}
        .company-info .left .line{width: 115px;height: 1px ;background: #39325e;margin: 30px 0;}
        .company-info .left p{font-size: 13px;margin-bottom: 30px;}
        .right {width: 535px;  height: 330px; }
        .right img{width: 100%;height: 100%;}
        .honor li img{height: 374px}
        .honor .en-tit{margin-left: -31px;}
        .honor .line2{left: 80px; }
        .honor .en-tit{margin-left: -31px;}
        .honor .line2{left: 80px; }
        .product .en-tit{margin-left: -22px;}
          .product .line2{left: 60px; }
        .introduction .en-tit{margin-left: -68px;}
        .introduction .line2{left: 150px; }
        .carousel-inner{height:414px;width: 100%}
        .carousel-inner .item{height:100%;width: 100%}
        .carousel-inner .item img{height:100%;width: 100%}
</style>
</head>
<body class="">
	<jsp:include page="_top.jsp"></jsp:include>
	 <cms:ad  companyId="${companyId}" var="syb" code="syBanner" ></cms:ad>
	<div id="myCarousel" class="carousel slide" data-ride="carousel">
		<!-- 轮播（Carousel）指标 -->
		<ol class="carousel-indicators">
			<c:forEach items="${syb}" var="item" varStatus="count">
				<li data-target="#myCarousel" data-slide-to="${count.index}"
					<c:if test="${count.index eq 0 }">class="active"</c:if>></li>
			</c:forEach>
		</ol>
		<!-- 轮播（Carousel）项目 -->
		<div class="carousel-inner">
			<c:forEach items="${syb}" var="item" varStatus="count">
				<div class='<c:if test="${count.index eq 0 }">active</c:if> item'>
					 <img src="${item.adImg }"
						alt="${item.adTitle}">
				</div>
			</c:forEach>
		</div>
		<!-- 轮播（Carousel）导航 -->
		<a class="carousel-control left" href="#myCarousel" data-slide="prev"></a>
		<a class="carousel-control right" href="#myCarousel" data-slide="next">
		</a>
	</div>


	<div class="container">
		<div class="advantage">
			<h3 class="text-center">我们的优势</h3>
			<h3 class="en-tit">
				<span class="line"></span>advantage<span class="line2"></span>
			</h3>
			<ul>
			<cms:ad  companyId="${companyId}" var="wmd" code="wmdys"></cms:ad>
				<c:forEach var="item" items="${wmd }">
					<li><a href="${item.adUrl }"> <img src="${item.adImg }">
							<div class="txt">
								<h3>${item.adTitle }</h3>
								<span>${item.adInfo1 }</span>
								<p>${item.adInfo2 }</p>
							</div></a></li>
				</c:forEach>
			</ul>
		</div>

	</div>
	<div class="clr"></div>
	
<div class="container ">
	<div class=" case university">
		<h3 class="text-center">成功案例</h3>
		<h3 class="en-tit">
			<span class="line"></span>case<span class="line2"></span>
		</h3>
		<div id="product-wrap">
		
			<ul id="product">
			<cms:ad  companyId="${companyId}" var="cgal" code="cgal" ></cms:ad>
				<c:forEach var="item" items="${cgal}">
					<li><a href="${item.adUrl }"> <img src="${item.adImg }"
							alt=""> <span>${item.adTitle}</span>
					</a></li>
				</c:forEach>
			</ul>
			<span class="prev"><span
				class="glyphicon glyphicon-chevron-left"></span></span> <span class="next"><span
				class="glyphicon glyphicon-chevron-right"></span></span>
		</div>
	</div>
	</div>

<div class="container ">
	<div class=" product university">
		<h3 class="text-center">产品展示</h3>
		<h3 class="en-tit">
			<span class="line"></span>product<span class="line2"></span>
		</h3>
		<div id="university-wrap">
			<ul id="university">
			<cms:ad  companyId="${companyId}" var="cpzs" code="cpzs"></cms:ad>
				<c:forEach var="item" items="${cpzs}">
					<li><a href="${item.adUrl }"> <img src="${item.adImg }"
							alt=""> <span>${item.adTitle}</span>
					</a></li>
				</c:forEach>
			</ul>
			<span class="prev"><span
				class="glyphicon glyphicon-chevron-left"></span></span> <span class="next"><span
				class="glyphicon glyphicon-chevron-right"></span></span>
		</div>
	</div>
	</div>
<%--
	<div class="container ">
		<div class="honor university">
			<h3 class="text-center">荣誉资质</h3>
			<h3 class="en-tit">
				<span class="line"></span>honor<span class="line2"></span>
			</h3>
			<div id="honor-wrap">
				<ul id="honor">
					<cms:ad var="items" code="ryzz"></cms:ad>
					<c:forEach var="item" items="${items}">
						<li> <img src="${item.adImg }"
								alt=""> <span>${item.adTitle}</span>
					</li>
					</c:forEach>
				</ul>
				<span class="prev"><span
					class="glyphicon glyphicon-chevron-left"></span></span> <span class="next"><span
					class="glyphicon glyphicon-chevron-right"></span></span>
			</div>
		</div>
	</div>
	 --%>


	<div class="container">
		<div class="news">
			<h3 class="text-center">行业新闻</h3>
			<h3 class="en-tit">
				<span class="line"></span>news<span class="line2"></span>
			</h3>
			<ul class="row">
				<cms:arts code="hyxw" var="arts" pageNow="0" pageSize="4"  ></cms:arts>
				<c:forEach items="${arts }" var="item">
					<li class="col-md-6">
						<h4>
							<a href="${path }/redirect/article?id=${item.artId}">${item.artTitle}</a>
						</h4>
						<p>${item.artAbstract}</p> <span> <fmt:formatDate
								value="${item.artCreatetiem }" type="date" /></span>
					</li>
				</c:forEach>
			</ul>
		</div>
	</div>
	<cms:ad  companyId="${companyId}" var="gs" code="gsjs" multi="false"></cms:ad>
	<div class="container introduction">
    <h3 class="text-center">公司介绍</h3>
    <h3 class="en-tit"><span class="line"></span>introduction<span class="line2"></span></h3>
    <div class="company-info">

        <div class="left">
            <h3>${gs.adTitle }</h3>
            <div class="line"></div>
            <div>
           ${gs.adInfo1}
             </div>
        </div>
        <div class="right">
            <img src="${gs.adImg }" alt="">
        </div>
    </div>
</div>



	<jsp:include page="_foot.jsp"></jsp:include>
</body>
<script type="text/javascript"
	src="${path }/resource/js/plugin/jquery-2.1.4.min.js"></script>
<script type="text/javascript"
	src="${path }/resource/plugin/bootstrap-3.3.5/js/bootstrap.min.js"></script>
	
	<script src="${path }/resource/js/plugin/tween.js"></script>
<script src="${path }/resource/js/plugin/util.js"></script>

<script>
$(".nav-item li").eq(0).addClass("active")
$(".suspend").mouseover(function() {
    $(this).stop();
    $(this).animate({width: 156}, 400);
});
$(".suspend").mouseout(function() {
    $(this).stop();
    $(this).animate({width:36}, 400);
});
~(function () {
    var step = 0;
    function changeImg(obj, len, width) {
        if (step === 0) {
            obj.style.left = 0;
        }
        step++;
        window.tween(obj, {left: -step * width}, 1500);
        if (step >= (len / 4)-1) {
            step = 0;
        }
    }
    function changeImg2(obj, len, width) {
        step--;
        if(step<0)
        {
            step=(len / 4)-2;
            css(obj,"left",-(step+1)*width)
        }
        window.tween(obj,{left:-step*width},1500);
    }
    // 成功案例
    var product_wrap=document.getElementById("product-wrap");
    var next1=document.getElementsByClassName("next")[0];
    var prev1=document.getElementsByClassName("prev")[0];
    product_wrap.onmouseover=function(){
        next1.style.display="block";
        prev1.style.display="block"
    };
    product_wrap.onmouseout=function(){
      next1.style.display="none";
      prev1.style.display="none"
    };
    var product = document.getElementById("product");
    var len1=product.getElementsByTagName("li").length;
    next1.onclick=function () {
        changeImg(product, len1,1160)
    }
    prev1.onclick=function () {
        changeImg2(product, len1, 1160)
    }
    // 产品展示
    var university_wrap=document.getElementById("university-wrap");
    var next2=document.getElementsByClassName("next")[1];
    var prev2=document.getElementsByClassName("prev")[1];
    university_wrap.onmouseover=function(){
        next2.style.display="block";
        prev2.style.display="block"
    };
    university_wrap.onmouseout=function(){
      next2.style.display="none";
      prev2.style.display="none"
    };
    var university = document.getElementById("university");
    var len2=university.getElementsByTagName("li").length;
    next2.onclick=function () {
        changeImg(university, len2,1160)
    }
    prev2.onclick=function () {
        changeImg2(university, len2, 1160)
    }
    // 荣誉资质
  /*  var honor_wrap=document.getElementById("honor-wrap");
    var next3=document.getElementsByClassName("next")[2];
    var prev3=document.getElementsByClassName("prev")[2];
    honor_wrap.onmouseover=function(){
        next3.style.display="block";
        prev3.style.display="block"
    };
    honor_wrap.onmouseout=function(){
      next3.style.display="none";
      prev3.style.display="none"
    };
    var honor = document.getElementById("honor");
    var len3=honor.getElementsByTagName("li").length;
    next3.onclick=function () {
        changeImg(honor, len3,1160)
    }
    prev3.onclick=function () {
        changeImg2(honor, len3, 1160)
    }*/

})() 
</script>

</body>
</html>
